<template>
	<view class="confrim-wrapper" :style="{paddingTop: paddingTop + 'px'}">
		<navBar title="确认订单"  custom-back @back="onBack('prev')" @home="onBack('home')"/>
		<view class="list-item address" @click="getAddress">
			<view class="item-left">
				<view class="img-icon">
					<image src="../../static/currentImg.png"></image>
				</view>
				<view class="adress-info" v-if="addressInfo.provinceName">
					<view class="phone">{{addressInfo.name}} {{ addressInfo.tel }}</view>
					<view class="dz">
						{{ addressInfo.provinceName }}{{ addressInfo.cityName }}{{ addressInfo.countyName }}{{ addressInfo.addressDetail }}
					</view>
				</view>
				<view class="adress-info" v-else>
					<view class="dz">请选择收货地址</view>
				</view>
			</view>
			<view class="item-right">
				<u-icon name="arrow-right" color="#000" size="30"></u-icon>
			</view>
		</view>
		<view class="goods-info">
			<view class="title">商品信息</view>
			<view class="info">
				<view class="goods-img">
					<image :src="goodsInfo.img?goodsInfo.img:'../../static/goods_default_4.png'" mode=""></image>
				</view>
				<view class="goods-details">
					<view class="goods-name">{{ goodsInfo.productName }}</view>
					<view class="goods-type">{{ goodsInfo.specificationModel }}</view>
					<view class="goods-price">
						<view class="price">{{ goodsInfo.redeemIntegral }}积分</view>
						<view class="count">×{{ count }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list-item total-price">
			<view class="item-left">商品总额</view>
			<view class="item-right">{{ totalAmcount }}积分</view>
		</view>
		<view class="list-item yhq">
			<view class="item-left">优惠券</view>
			<view class="item-right">暂无可用<u-icon name="arrow-right" color="#000" size="30"></u-icon>
			</view>
		</view>
		<view class="list-item amount">
			<view class="item-left"></view>
			<view class="item-right">合计：<text class="total">{{ totalAmcount }}</text></view>
		</view>
		<view class="list-item pay-info">
			<view class="title">支付方式</view>
			<view class="info">
				<view class="icon">
					<image
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/guarantee/jifen.png"
						mode=""></image>
				</view>
				<view class="type">
					<view class="jf">积分支付</view>
					<view class="ye">积分余额：{{ integralInfo.notUsed  }}</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn">
				<view>应付金额：<text class="acount">{{ totalAmcount }}积分</text></view>
				<view style="width: 200rpx;">
					<u-button type="primary" text="确认支付" @click="onConfrim"></u-button>
				</view>

			</view>

		</view>
		<!-- 弹窗：返回 -->
		<u-modal :show="visibleBack" title="确定要放弃该订单吗？" :showCancelButton="true" cancelText="去意已决" confirmText="我再想想"
			confirmColor="#CF1A1B" @confirm="visibleBack = false" @cancel="confirmBack">
		</u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import navBar from '@/components/navBar.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				integralInfo: {},
				goodsInfo: {},
				paddingTop: '',
				count: 0,
				goodsId: '',
				totalAmcount: '',
				addressInfo: '',
				visibleBack: false,
				backPosition:''
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
		},
		methods: {
			//初始化信息
			async getInitInfo() {
				try {
					// 获取积分余额
					const res = await this.$request({
						url: '/marketing-center/integralRuleDetails/getUserIntegral',
						data: {
							pageSize: 10,
							pageNum: 1,
							userId: this.getUserInfo.id
						}
					})
					//获取商品信息
					const goodsData = await this.$request({
						url: '/product-center/integralGood/goodDetails',
						data: {
							id: this.goodsId,
						}
					})
					//获取默认地址
					const addressData = await this.$request({
						method: 'GET',
						url: `/user-center/address/defaultAddress?userId=${this.getUserInfo.id}`
					})
					this.addressInfo = addressData.datas
					this.goodsInfo = goodsData.datas
					this.integralInfo = res.datas
					this.totalAmcount = parseInt(this.goodsInfo.redeemIntegral) * this.count
					uni.hideLoading()
				} catch (res) {
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				}
				uni.stopPullDownRefresh();
			},
			//地址管理		
			getAddress() {
				uni.navigateTo({
					url: '/minePack/user/accountSetting/shippingAddress?type=select',
					events: {
						//获取下级页面传递回来的参数
						getAddressItem: data => {
							uni.navigateBack()
							this.addressInfo = data
						}
					}
				})
			},
			//确认支付
			async onConfrim() {
				if (this.totalAmcount > this.integralInfo.notUsed) {
					uni.showToast({
						title: '积分余额不足！',
						icon: 'error'
					})
					return false
				}
				uni.showLoading({
					title: '加载中...'
				})
				try {
					const res = await this.$request({
						url: '/order-center/car-owner-integral/orders',
						data: {
							consigneeAddressDetail: this.addressInfo.addressDetail,
							consigneeCity: this.addressInfo.cityName,
							consigneeCounty: this.addressInfo.countyName,
							consigneeName: this.addressInfo.name,
							consigneePhone: this.addressInfo.tel,
							consigneeProvince: this.addressInfo.provinceName,
							couponIds: [],
							goodsContext: {
								goodsId: this.goodsId,
								quantity: this.count
							},
							payScore: this.totalAmcount,
							userId: this.getUserInfo.id
						}
					})
					uni.navigateTo({
						url: '/indexPack/integral/integralPaySuccess',
						success: (resp) => {
							resp.eventChannel.emit('detailInfo', {
								data: res.datas
							})
						}
					})

					uni.hideLoading()
				} catch (e) {
					uni.hideLoading()
					this.$refs.uToast.show({
						message: e.respMsg || '请求失败',
						position: 'top',
						duration: 2000
					})
				}


			},
			onBack(position){
				this.backPosition = position
				this.visibleBack = true
			},
			// 确认返回
			confirmBack() {
			  if (this.backPosition === 'home') {
			    uni.switchTab({ url: '/pages/index/index/index' })
			  } else if (this.backPosition === 'prev') {
			    uni.navigateBack()
			  }
			},
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中...'
			})
			this.paddingTop = this.$store.getters['global/getSystemInfo'].navBarHeight
			this.count = option.number
			this.goodsId = option.goodsId
			this.getInitInfo()
		},
	}
</script>

<style lang="scss" scoped>
	.confrim-wrapper {
		position: relative;
		font-size: 14px;

		.footer {
			position: fixed;
			bottom: 0;
			padding: 36rpx;
			width: calc(100% - 72rpx);
			background: #fff;

			.btn {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.acount {
					font-size: 18px;
					font-weight: bold;
					color: #F15757;
				}

				/deep/ .u-button {
					width: 200rpx;
				}
			}
		}

		.list-item {
			margin-bottom: 12rpx;
			padding: 16rpx 32rpx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item-left {
				flex: 1;
				color: rgba(0, 0, 0, 0.65)
			}

			.item-right {
				width: 80rpx;
				text-align: right;
				display: flex;
				justify-content: flex-end;
			}
		}

		.address {
			margin-bottom: 24rpx;

			.item-left {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				image {
					width: 112rpx;
					height: 112rpx;
					margin-right: 28rpx;
				}

				.adress-info {
					.phone {
						font-size: 15px;
						padding-bottom: 18rpx;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.85)
					}

					.dz {
						width: 100%;
						font-size: 12px;
						font-weight: 400;
						color: #CF1A1B;
						word-wrap: break-all;
						line-break: anywhere;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}

		.total-price {
			.item-right {
				font-weight: 400;
				color: #F15757;
			}
		}

		.yhq {
			.item-right {
				width: 150rpx;
				color: rgba(0, 0, 0, 0.3);
			}
		}

		.amount {
			.item-right {
				width: 200rpx;
				color: rgba(0, 0, 0, 0.7);

				.total {
					font-weight: bold;
					color: #F15757;
				}
			}
		}

		.pay-info {
			display: block;

			.title {
				font-weight: 400;
				color: rgba(0, 0, 0, 0.65);
				padding-bottom: 32rpx;
				border-bottom: 1px solid #eee;
				margin-bottom: 20rpx;
				padding-top: 32rpx;
			}

			.info {
				display: flex;

				.icon {
					margin-right: 20rpx;
				}

				image {
					height: 84rpx;
					width: 84rpx;
				}

				.type {
					.jf {
						font-size: 16px;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.85);
						padding-bottom: 32rpx;
					}
				}
			}
		}

		.goods-info {
			margin-bottom: 12rpx;
			padding: 16rpx 32rpx;
			background: #fff;

			.title {
				font-weight: 400;
				color: rgba(0, 0, 0, 0.65);
				padding-bottom: 32rpx;
			}

			.info {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.goods-img {
					width: 176rpx;
					height: 176rpx;
					margin-right: 24rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.goods-details {
					flex: 1;
					width: calc(100% - 200rpx);

					.goods-name {
						font-size: 15px;
						font-weight: 500;
						color: rgba(0, 0, 0, 0.85);
						line-break: anywhere;
						word-wrap: break-all;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						text-shadow: 0 0 0.1px currentcolor;
						line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-bottom: 14rpx;
					}

					.goods-type {
						font-size: 12px;
						font-weight: 400;
						color: rgba(0, 0, 0, 0.65);
						padding-bottom: 30rpx;
					}

					.goods-price {
						display: flex;
						justify-content: space-between;

						.price {
							font-weight: bold;
							color: #EE3B3B
						}

						.count {
							font-weight: 500;
							color: rgba(0, 0, 0, 0.85)
						}
					}
				}
			}
		}
	}
</style>
